<#include "/layout/layout.ftl"/>

<@body>
<link href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script>

<div class="panel-body" style="padding-bottom:0px;">
    <div class="panel panel-default" >
        <div class="panel-heading">查询条件</div>
        <div class="panel-body" style="padding:2px">
            <form id="formSearch" class="form-horizontal">
                <div class="" style="margin-top:15px">
                    <div class="" style="margin-top:15px">
                        <label class="control-label col-sm-1" for="projectName">项目名称</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="projectName">
                        </div>
                        <div class="col-sm-4" style="text-align:left;">
                            <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary btnFont"
                            onclick="queryProject()">
                                查询
                            </button>
                        </div>
                    </div>
            </form>
        </div>
    </div>
    <div id="toolbar">
        <button id="btn_add" type="button" class="btn btn-default" onclick="openModal()">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
        </button>
        <button id="btn_edit" type="button" class="btn btn-default" onclick="modifyProjectName()">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
        </button>
        <button id="btn_delete" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
        </button>
        <button type="button" class="btn btn-default" onclick="projectMemberPage()">
            <span class="glyphicon glyphicon-user" aria-hidden="true"></span>维护项目成员
        </button>
    </div>
    <table id="dataTable"></table>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        新增修改项目
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-md-3">
                            项目名称:
                        </label>
                        <div class="col-md-9">
                            <input type="hidden" class="form-control" id="id"/>
                            <input class="form-control" id="projectNameDo"/>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" onclick="submitProject()">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>
<script>
    $('#myModal').on('hide.bs.modal', function () {
        $("#projectNameDo").val("");
        $("#id").val("");
    });
    
    function projectMemberPage() {
        var selections=  $("#dataTable").bootstrapTable("getSelections");
        if(selections.length <=0){
            Ewin.alert("至少要选择一条数据!");
            return;
        }
        if(selections.length >1){
            Ewin.alert("只能选择一条数据!");
            return;
        }
        var projectObj =selections[0];
        var id =projectObj.id;
        window.location.href="/project/projectMemberPage?projectId="+id;
    }

    function modifyProjectName() {
      var selections=  $("#dataTable").bootstrapTable("getSelections");
      if(selections.length <=0){
          Ewin.alert("至少要选择一条数据!");
          return;
      }
      if(selections.length >1){
          Ewin.alert("只能选择一条数据!");
          return;
      }
      var projectObj =selections[0];
      var projectName = projectObj.projectName;
      var id =projectObj.id;
      $("#projectNameDo").val(projectName);
      $("#id").val(id);
      openModal();
    }

    function openModal(){
        $("#myModal").modal('show')
    }
    function queryProject() {
        $("#dataTable").bootstrapTable('refresh');
    }
    function submitProject(){
        var url ="/project/saveProject";
        var projectName = $("#projectNameDo").val();
        var id =$("#id").val();
        $.ajax({
            url:url,
            method:"post",
            data:{
                projectName:projectName,
                id:id
            },
            //success回调，相当于java里面的返回值
            success:function (responseMessage) {
                if(responseMessage.success){
                    $("#myModal").modal('hide');
                    $("#projectNameDo").val("");
                    $("#id").val("");
                    $("#dataTable").bootstrapTable('refresh');
                }else {
                    Ewin.alert(responseMessage.msg)
                }
            }
        })
    }
    // $(function () {
        $('#dataTable').bootstrapTable({
            url:"/project/getProject", //请求后台的URL（*）
            method:"get", //请求方式（*）
            pageNumber: 1, ////初始化加载第一页，默认第一页
            pageSize: 10, //每页的记录行数（*）
            pageList: [5, 10, 20, 50, 100], //可供选择的每页的行数（*）
            pagination: true, //是否显示分页（*）
            sidePagination: "server", //分页方式:client客户端分页,server服务端分页（*）
            queryParams: param, //传递参数（*）
            cache:false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            clickToSelect:true,
            columns:[
                {
                    checkbox:true
                },
                {
                    "title":"项目id",
                    "field":"id"
                },
                {
                "title":"项目名称",
                "field":"projectName"
                }
            ],
            height:500,
            responseHandler:function (res) {
                return res.data;
            }

        })
    // })
    function param(params) {

        var temp = {
            projectName:$("#projectName").val(),
            pageSize: params.limit,
            pageNum: (params.offset / params.limit) + 1 //需要计算页数固定写法
        };
        return temp;
    }
</script>
</@body>